<template>
  <view>
    <view class="form-container">
      <uni-forms ref="form" :modelValue="formData" labelWidth="120px" :rules="rules" labelPosition="top">
        <cu-cell-group>
          <uni-forms-item name="secondFactoryId">
            <cu-cell
              title="分厂"
              required
              link
              placeholder="选择分厂"
              :description="formData.secondFactoryName"
              @click="showAreaPicker"
            ></cu-cell>
          </uni-forms-item>
          <uni-forms-item name="areaId">
            <cu-cell
              title="工段/区域"
              required
              link
              placeholder="选择工段/区域"
              :description="formData.areaName"
              @click="selectSecondFactoryPicker"
            ></cu-cell>
          </uni-forms-item>
          <uni-forms-item name="deviceId">
            <cu-cell
              title="设备"
              required
              link
              placeholder="选择设备"
              :description="formData.deviceName"
              @click="deviceNameClick()"
            ></cu-cell>
          </uni-forms-item>
        </cu-cell-group>
        <view class="background-white">
          <uni-forms-item name="content" label="工作内容：" label-width="200px">
            <textarea required v-model="formData.content" class="text-area" placeholder="输入工作内容" maxlength="20" />
          </uni-forms-item>
        </view>
        <cu-cell-group>
          <uni-forms-item name="electricUnit">
            <cu-cell
              title="电压单位"
              required
              link
              placeholder="请选择电压单位"
              :description="formData.electricUnit"
              @click="typeClick()"
            ></cu-cell>
          </uni-forms-item>
          <uni-forms-item name="electricNum">
            <cu-cell title="电压" required>
              <input
                class="uni-input text-right"
                type="number"
                style="height: 100%"
                v-model="formData.electricNum"
                placeholder="输入电压值"
                maxlength="15"
              />
            </cu-cell>
          </uni-forms-item>
          <uni-forms-item name="stopTime">
            <cu-cell
              title="停电时间"
              required
              link
              placeholder="选择停电时间"
              :description="formData.stopTime"
              @click="showTimePicker"
            ></cu-cell>
          </uni-forms-item>
        </cu-cell-group>
      </uni-forms>
      <view class="submit-group">
        <button class="u-button block" :ripple="true" @click="submit">提交</button>
      </view>
    </view>
    <device-selector
      ref="deviceName"
      title="设备名称"
      :areaId="formData.areaId"
      @confirm="deviceNameConfirm"
    ></device-selector>
    <second-area-picker ref="areaSelectorRef" @confirm="onAreaSelectorChange"></second-area-picker>
    <data-picker
      ref="voltageUnit"
      title="电压单位"
      label-key="name"
      value-key="id"
      :data="voltageUnitList"
      @confirm="voltageUnitListConfirm"
    ></data-picker>
    <data-picker
      ref="secondFactory"
      title="工段/区域"
      label-key="areaName"
      value-key="areaId"
      :data="secondFactoryList"
      @confirm="secondFactoryConfirm"
    ></data-picker>
    <Signature ref="signature" v-model="formData.signatureUrls" auto-upload @success="onSignatureSuccess" />
    <CuDateTimePicker ref="timePicker" @change="timePickerChange" />
  </view>
</template>
<script>
import SecondAreaPicker from './components/secondAreaPicker.vue'
import Signature from '@/pages/jobSlip/components/ContinueSign.vue'
import CuCellGroup from '@/components/cu-cell/cu-cell-group.vue'
import CuCell from '@/components/cu-cell/cu-cell.vue'
import DictPicker from '@/components/dict-picker/index.vue'
import CuDateTimePicker from '@/components/cu-date-time-picker/cu-date-time-picker.vue'
import DeviceSelector from './components/device-selector.vue'
import DataPicker from '@/components/data-picker/index.vue'
import { getSonArea, createElectricProject, getElectricDetail, stopUpdate } from '@/api/spw/powerCut.js'
import dayjs from 'dayjs'
export default {
  components: {
    CuCellGroup,
    CuCell,
    SecondAreaPicker,
    Signature,
    DictPicker,
    CuDateTimePicker,
    DeviceSelector,
    DataPicker
  },
  data() {
    return {
      formData: {
        areaId: '',
        areaName: '',
        content: '',
        deviceId: '',
        deviceName: '',
        electricNum: 0,
        electricUnit: '',
        secondFactoryId: 0,
        signatureUrls: '',
        stopTime: '',
        secondFactoryName: ''
      },
      ticketId: '',
      deviceNameLabel: '',
      voltageUnitList: [
        {
          id: 'V',
          name: 'V'
        },
        {
          id: 'KV',
          name: 'KV'
        }
      ],
      secondFactoryList: [],
      rules: {
        areaId: {
          rules: [
            {
              required: true,
              errorMessage: '工段/区域不能为空'
            }
          ]
        },
        secondFactoryId: {
          rules: [
            {
              required: true,
              errorMessage: '分厂不能为空'
            }
          ]
        },
        deviceId: {
          rules: [
            {
              required: true,
              errorMessage: '设备不能为空'
            }
          ]
        },
        content: {
          rules: [
            {
              required: true,
              errorMessage: '工作内容不能为空'
            }
          ]
        },
        electricUnit: {
          rules: [
            {
              required: true,
              errorMessage: '电压单位不能为空'
            }
          ]
        },
        electricNum: {
          rules: [
            {
              required: true,
              errorMessage: '电压值不能为空'
            }
          ]
        },
        stopTime: {
          rules: [
            {
              required: true,
              errorMessage: '停电时间不能为空'
            }
          ]
        }
      }
    }
  },
  onLoad(option) {
    this.ticketId = option.ticketId
    if (this.ticketId) {
      getElectricDetail(this.ticketId).then(({ data }) => {
        this.formData.ticketId = data.ticketId
        this.formData.areaId = data.areaId
        this.formData.areaName = data.areaName
        this.formData.content = data.content
        this.formData.deviceId = data.deviceId
        this.formData.deviceName = data.deviceName
        this.formData.electricNum = data.electricNum
        this.formData.electricUnit = data.electricUnit
        this.formData.secondFactoryId = data.secondFactoryId
        this.formData.secondFactoryName = data.secondFactoryName
      })
    }
  },
  methods: {
    deviceNameClick() {
      if (!this.formData.secondFactoryId) {
        this.$modal.showToast('请先选择分厂')
        return
      }
      if (!this.formData.areaId) {
        this.$modal.showToast('请先选择工段/区域')
        return
      }
      this.$refs.deviceName.open()
    },
    deviceNameConfirm(obj) {
      this.formData.deviceName = obj.name
      this.formData.deviceId = obj.value
    },
    showAreaPicker() {
      this.$refs.areaSelectorRef.open()
    },
    selectSecondFactoryPicker() {
      if (!this.formData.secondFactoryId) {
        this.$modal.showToast('请先选择分厂')
        return
      }
      this.$refs.secondFactory.open()
    },
    timePickerChange(value) {
      this.formData.stopTime = dayjs(value).format('YYYY-MM-DD HH:mm:ss')
    },
    showTimePicker() {
      this.$refs.timePicker.show()
    },
    onAreaSelectorChange(obj) {
      this.formData.secondFactoryId = obj.value
      this.formData.secondFactoryName = obj.name
      this.formData.areaId = ''
      this.formData.areaName = ''
      //查询工段/区域
      getSonArea(this.formData.secondFactoryId).then((res) => {
        this.secondFactoryList = res.data
      })
    },
    secondFactoryConfirm(obj) {
      this.formData.areaId = obj.value
      this.formData.areaName = obj.name
      console.log(this.formData)
    },
    voltageUnitListConfirm(obj) {
      this.formData.electricUnit = obj.value
    },
    typeClick() {
      this.$refs.voltageUnit.open()
    },
    submit() {
      this.$refs.form.validate().then((res) => {
        if (res) {
          this.$refs.signature.open()
        }
      })
    },
    /**
     * @description  签名成功
     */
    onSignatureSuccess() {
      if (this.ticketId) {
        this._edit()
      } else {
        this._save()
      }
    },
    async _save() {
      createElectricProject(this.formData).then(() => {
        this.$modal.showToast('新增成功')
        uni.navigateBack()
      })
    },
    async _edit() {
      stopUpdate(this.formData).then(() => {
        this.$modal.showToast('重新申请成功')
        uni.navigateBack()
      })
    }
  }
}
</script>
<style lang="scss" scoped></style>
